<template>
	<view class="">
		<u-sticky>
			<view class="city-serach">
				<view class="search-input flex align-center">
					<input @input="keyInput" placeholder="请输入城市名称搜索" class="city-serach-input" />
					<image class="search-img" :src='STATIC_URL+"81.png"' mode="aspectFill"></image>
				</view>
			</view>
			<view class="locate_info" v-if="!serachCity">
				<view class="locate_info_title">
					<view>当前位置</view>
					<!-- <view class="locate_info_icon"></view> -->
				</view>
				<view class="locate_info_authorize flex">
					<view class="flex" style="flex: 7.9;" @tap.stop="isBack">
						<image class="locate_info_address_icon" :src='STATIC_URL+"79.png"'></image>
						<template v-if="!is_again">
							<view class="locate_info_text">定位中</view>
						</template>
						<template v-else>
							<view class="locate_info_text">{{cityInfo ? cityInfo.cityAddress : '定位中'}}</view>
						</template>
					</view>
					<view style="flex: 2.1;text-align: right;" @tap.stop="alignLocation">
						<text>重新定位</text>
						<u-icon name="reload"></u-icon>
					</view>
				</view>
				<view class="locate_info_title">
					<view>热门城市</view>
					<!-- <view class="locate_info_icon"></view> -->
				</view>
				<view class="locate_info_list">
					<view class="locate_info_item" v-for="(item, index) in hostCityList" :key="index" @tap.stop="selectHostCity(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-sticky>
		
		<view class="locate_info" v-if="serachCity">
			<view class="locate_info_list">
				<view class="locate_info_item" v-for="(item, index) in searchDatas" :key="index" @click="$emit('select', item)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="t-index-address" v-if="!serachCity">
			<scroll-view class="t-index-address__scroll-view" :scroll-into-view="scrollview" :scroll-y="true"
				:enable-flex="true">
				<view :id="group.initial" v-for="group in cityList" :key="group.initial">
					<view class="t-index-address__anchor">
						<text>{{ group.initial }}</text>
					</view>
					<view class="t-index-address__list">
						<view class="t-index-address__cell" v-for="(city, index) in group.list" :key="index"
							@click="$emit('select', city)">
							<text>{{ city.name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="t-index-address__sidebar">
				<view class="t-index-address__index" v-for="group in cityList" :key="group.initial"
					@touchstart.stop.prevent="onTouchMove(group.initial)" @touchend.stop.prevent="onTouchStop"
					@touchcancel.stop.prevent="onTouchStop">
					<span>{{ group.initial }}</span>
				</view>
			</view>
			<view class="t-index-address__alert" v-if="touchmove">
				<text>{{ activeIndex }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	// import cityList from "./cities.json";
	import cityList from "./city.json";

	export default {
		data() {
			return {
				scrollview: "A",
				cityList: [],
				activeIndex: "A",
				touchmove: false,
				serachCity: "",
				hostCityList: [],
				cityInfo: "",
				is_again: false,
			};
		},
		watch: {
			activeIndex(value) {
				this.scrollview = value;
			},
		},
		computed: {
			/**
			 * @desc 搜索后的城市列表
			 * @return Array
			 */
			searchDatas() {
				var searchData = [];
				this.cityList.forEach((item, index) => {
					if (item.list.length > 0) {
						item.list.forEach((item1, index1) => {
							if (item1.name.indexOf(this.serachCity) !== -1) {
								searchData.push(item1);
							}
						})
					}
				})
				return searchData;
			}
		},
		methods: {
			initCityList() {
				this.cityList = cityList.city;
				// console.log(this.cityList);
			},
			onTouchMove(index) {
				this.activeIndex = index;
				this.touchmove = true;
			},
			onTouchStop() {
				this.touchmove = false;
			},
			/**
			 * @desc 监听输入框的值
			 */
			keyInput(event) {
				this.serachCity = event.detail.value;
			},
			selectHostCity(selectInfo) {
				var selectData = "";
				this.cityList.forEach((item, index) => {
					if (item.list.length > 0) {
						item.list.forEach((item1, index1) => {
							if (item1.name == selectInfo.name) {
								selectData = item1;
							}
						})
					}
				})
				if (selectData) {
					this.$emit('select', selectData);
				}
			},
			getCityList() {
				this.$api.get(global.apiUrls.postCityInfo, {}).then(res => {
					if (res.data.code == 1) {
						this.hostCityList = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			alignLocation() {
				let _this = this;
				_this.is_again = false;
				uni.getSetting({
					success(res) {
						let locationStatus = true;
						// #ifdef MP-ALIPAY
						locationStatus = res.authSetting['location'];
						// #endif
						
						// #ifndef MP-ALIPAY
						locationStatus = res.authSetting['scope.userLocation'];
						// #endif
						
						if (locationStatus) {
							// 用户已经授权
							console.log('用户已授权定位');
							uni.getLocation({
								type: 'gcj02',
								success: function(res) {
									console.log(res);
									let location = res.longitude + ',' + res.latitude;
									_this.getAddressInfo(location, res.longitude, res.latitude);
								},
								fail: function(error) {
									// console.log(error);
									_this.$message.info('获取地理位置信息失败');
								}
							});
						} else {
							// 用户未授权，可以引导用户去授权
							console.log('用户未授权定位');
							uni.openSetting({
								success(res) {},
								fail(err) {
									console.log(err);
								}
							});
						}
					}
				});
			},
			// 逆地理编码 根据经纬度获取到城市信息
			getAddressInfo(location, lng, lat) {
				let _this = this;
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + location +
						'&key=' + global.ampKey, //仅为示例，并非真实接口地址。
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					success: (res) => {
						// console.log('456', res);
						if (res.data.status == '1') {
							let districtsIndex = res.data.regeocode.formatted_address.indexOf(res.data.regeocode.addressComponent.city);
							if (districtsIndex != -1) {
								districtsIndex = districtsIndex + res.data.regeocode.addressComponent.city.length;
							}
							let city_districts = res.data.regeocode.formatted_address.slice(districtsIndex, res.data.regeocode.formatted_address.length);
							let cityInfo = {
								citycode: res.data.regeocode.addressComponent.citycode,
								city: res.data.regeocode.addressComponent.city.slice(0, -1),
								city_districts: city_districts,
								cityAddress: res.data.regeocode.addressComponent.city + city_districts,
								lng: Number(lng),
								lat: Number(lat)
							}
							uni.setStorageSync('city', cityInfo);
							_this.cityInfo = cityInfo;
							_this.is_again = true;;
						} else {
							_this.$message.info('获取地理位置信息失败');
						}
				
					},
					fail: (error) => {
						// console.log(error)
						_this.$message.info('获取地理位置信息失败');
					}
				});
			},
			isBack() {
				uni.navigateBack();
			},
		},
		mounted() {
			if (uni.getStorageSync('city')) {
				this.cityInfo = uni.getStorageSync('city');
				this.is_again = true;
				console.log(this.cityInfo);
			}
			this.initCityList();
			this.getCityList();
		},
	};
</script>

<style lang="scss" scoped>
	.city-serach {
		width: 100%;
		padding: 0 30rpx 24rpx 30rpx;
		background: #fff;
		display: flex;
		.search-input {
			width: 690rpx;
			position: relative;
			background: #F7F7F7;
			border-radius: 40rpx;
			.search-img {
				position: absolute;
				top: 50%;
				left: 24rpx;
				transform: translateY(-50%);
				width: 28rpx;
				height: 28rpx;
			}
		}
	
		&-input {
			width: 100%;
			height: 60rpx;
			background: #F7F7F7;
			border-radius: 40rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			padding: 0 24rpx 0 78rpx;
		}
	}
	.locate_info {
		background: #fff;
		padding: 0 30rpx;
		&_title {
			font-size: 30rpx;
			// color: #666666;
			position: relative;
			// padding-left: 16rpx;
		}
		&_icon {
			background: #FC5B03;
			width: 6rpx;
			height: 24rpx;
			border-radius: 3rpx;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		&_authorize {
			padding: 24rpx 0;
			font-size: 26rpx;
		}
		&_list {
			padding: 24rpx 0 0;
			overflow: hidden;
		}
		&_item {
			float: left;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			background: #F7F7F7;
			padding: 5rpx 24rpx;
			border-radius: 8rpx;
			font-size: 26rpx;
		}
		&_address_icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			transform: translateY(3rpx);
		}
		&_text {
			width: calc(100% - 55rpx);
		}
	}
	.t-index-address {
		height: 100%;
		background: #fff;

		&__scroll-view {
			width: 100%;
			height: 100%;
			max-height: 100vh;
		}

		&__anchor {
			padding: 15rpx 30rpx;
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: #606266;
			background-color: rgb(245, 245, 245);
		}

		&__list {
			padding: 30rpx 70rpx 0 30rpx;
			overflow: hidden;
		}

		&__cell {
			// height: 70rpx;
			// line-height: 70rpx;
			// border-bottom: 1rpx solid #f2f2f2;
			// font-size: 26rpx;
			float: left;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			background: #F7F7F7;
			padding: 5rpx 24rpx;
			border-radius: 8rpx;
			font-size: 26rpx;

			&:last-child {
				border: none;
			}
		}

		&__sidebar {
			position: fixed;
			top: 60%;
			right: 0;
			transform: translateY(-50%);
			z-index: 99;
		}

		&__index {
			padding: 10rpx 20rpx;
			font-size: 22rpx;
			font-weight: 500;
			line-height: 1;
		}

		&__alert {
			position: fixed;
			top: 50%;
			right: 90rpx;
			z-index: 99;
			margin-top: -60rpx;
			width: 120rpx;
			height: 120rpx;
			font-size: 50rpx;
			color: #fff;
			border-radius: 24rpx;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
